<!--支部空间留言版-->
<template>
  <article class="comment-components" ref="commentWrap">
  <cube-scroll
        ref="scroll"
        :options="options"
        @pulling-up="onPullingUp"
      >
    <div class="water-logo" v-if="list.length < 1">
      <img src="../../../static/images/dangjian/home/water-logo-comment.png" alt="">
    </div>
        <div class="block live-msg-wrap" v-for="(item,index) in list" :key="index">
          <div class="user-avatar">
            <div class="avatar">
              <!--<img src="../../../../static/images/slidepic.jpg" alt="">-->
              <img :src="tools.getImgUrl(item.photoId)" alt="">
            </div>
            <div class="info">
              <h1>{{item.commentUser}} 说：</h1>
            </div>
          </div>
          <div class="live-msg">{{item.commentContent}}</div>
          <div class="card-foot">
            <p class="text"><span class="icon-time"></span>{{item.commentTime}}</p>
            <div class="right">
              <ups :contentId="contentId" :commentId="item.commentId" :upsCount="item.ups"></ups>
            </div>
          </div>
        </div>
    <div v-if="!hasMoreList()" class="no-message">已显示全部观点</div>
        <p class="pdv-10"></p>
        <p class="pdv-5"></p>
      </cube-scroll>

    <!--留言寄语-->
    <!--<section class="foot-action">
      <div class="inner">
        <div class="full">
          &lt;!&ndash;<textarea :autoExpand="false" placeholder="说点什么" v-model="content"> </textarea>&ndash;&gt;
          <input placeholder="说点什么" type="text" v-model="content">
        </div>
        <div class="btn btn-small" @click="save()">
          <div class="default-block-btn">评论</div>
        </div>
      </div>
    </section>-->

    <liveMsgComponent @message="onMessage" v-if="preData.id" :shareType="shareType" :detail="preData" :commentList="true" @onComment="onComment" :contentId="preData.id" :comments="preData.comments"></liveMsgComponent>

  </article>
</template>

<script>
  import { Textarea } from 'cube-ui'
  import ups from '@/components/common/upsComponent'
  import liveMsgComponent from '@/components/common/liveMsgComponent'
  export default {
    name: 'commentListComponent',
    props: ['_contentId', 'shareType'],
    components: {Textarea, ups, liveMsgComponent},
    data () {
      return {
        isShow: true,
        contentId: '',
        tabIndex: 0,
        pageIndex: 1,
        pageSize: 10,
        content: '',
        preData: {},
        options: {
          pullUpLoad: true,
          scrollbar: false
        },
        detail: {},
        list: []
      }
    },
    created () {
      this.preData = this.$store.state.newsDetail
      console.log(this.preData)
      this.getList()
    },
    watch: {
      _contentId (val, oldVal) {
        this.preData = this.$store.state.newsDetail
        this.firstPage()
      }
    },
    methods: {
      /*保存评论之后*/
      onMessage () {
        this.firstPage()
        this.onComment()
      },
      /*点击消息按钮*/
      onComment () {
        this.$refs.commentWrap.scrollIntoView()
      },
      hasMoreList () {
        return !(this.list.length > 0 && this.noMore)
      },
      getList () {
        this.tabIndex = 0
        let id = this._contentId
        this.contentId = id
        let params = {
          contentId: id,
          pageNo: this.pageIndex,
          pageSize: this.pageSize
        }
        return this.fetchService.commentPage(params).then(res => {
          if (res.code !== 0) {
            return this.tools.tip(res.message || '接口服务出错，请联系管理员')
          }
          if (res.data.length === 0 && this.pageIndex !== 1) {
//            this.tools.tip('已无更多数据')
            this.noMore = true
          }
          this.pageIndex++
          this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate()
          this.list = this.list.concat(res.data)
          return res
        })
      },
      liveMessage () {
        this.tabIndex = 1
      },
      save () {
        if (this.content.length == 0 || this.content.trim().length == 0) {
          return this.tools.alert('请填写留言')
        }
        let params = {
          "content": this.content,
          "contentId": this.preData.id
        }
        this.tools.showLoading()
        this.fetchService.commentAdd(params).then(res => {
          this.tools.hideLoading()
          if (res.code === 0) {
            this.content = ''
            this.firstPage()
            this.$store.state.newsDetail.comments++
            return this.tools.alert('评论成功')
          }
        })
      },
      firstPage () {
        this.list = []
        this.pageIndex = 1
        this.getList()
      },
      onPullingUp () {
        this.$refs.commentWrap.scrollIntoView()
        this.getList().then(res => {
          setTimeout(() => {
            this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate(true, false)
            this.options.isPullUpLoad = !true
          }, 100)
        })
      },
      show () {
        this.isShow = true
      },
      back () {
        this.isShow = false
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "@/common/stylus/moon.scss";
  .comment-components {
    height:100%;
  }
</style>
